<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>18.3 v-bind 指令</title>

	<style>
		/* input[type="text"] {
			height: 30px;
			width: 300px;
			margin-bottom: 10px;
			border-radius: 5px;
			padding: 2px;
			font-size: 16px;

		} */

		.active {
			background: rgb(202, 54, 54);

			color: rgb(20, 4, 4);

		}
	</style>

</head>

<body>


	<div id="app">

		<!-- 
			xxx 在 app.data 要有定义 

			v-bind:属性="xxx"


			可以绑定 很多属性，甚至是 class 
			v-bind:class="klass"
		 -->

		<!-- 根据isActive 的真值，来添加 active 这个类 -->
		<!-- <a v-bind:href="url" v-bind:class="{active:isActive}">
			点我
			<img v-bind:src="img" alt=""> 
			</a> 

		-->


		<div>
			<!-- 简写方式  :xxx -->
			<a :href="url" :class="{active:isActive}">
				点我
			</a>

		</div>



	</div>


	<script src="../lib/vue.js"></script>
	<script src="js/main.js"></script>

</body>

</html>